<template>
<div>
    <table class="table" >
        <thead>
            <tr>
                <th>
                    操作
                </th>
                <th>
                    防区
                </th>
                <th style="width:20em;">
                    门店名字
                    <!--ModelSelect :options="shops_filter_options" v-model="shops_filter" placeholder="门店名字"> </ModelSelect-->
                </th>
                <th style="width: 12em">
                    <ModelSelect :options="shopsid_filter_options" v-model="shopsid_filter" placeholder="门店编号"> </ModelSelect>
                </th>
                <th>
                   开始<div style="display:inline-block"> <DatePicker input-class='date-picker-input' :language="zh" v-model="start_date" @selected="selectDate" > </DatePicker> </div>
                   时间<input type="number" min="0" max="24" v-model="start_hours" style="4em"></input>点<input type="number" min="0" max="60" v-model="start_minutes"></input>分
                   <br/>
                   结束<div style='display:inline-block'> <DatePicker input-class="date-picker-input" :language="zh" v-model="end_date" @selected="selectDate" > </DatePicker></div>
                   时间<input type="number" min="0" max="24" v-model="end_hours" style="4em"></input>点<input type="number" min="0" max="60" v-model="end_minutes"></input>分
                </th>
                <th>
                    管理员
                </th>
                <th>
                    处理结果
                </th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="log in logs_filter">
                <td>
                    {{log.operation}}
                </td>
                <td>
                    {{ log.arm_area ? "第" + log.arm_area + "号防区": "所有防区"  }}
                </td>
                <td>
                    {{ log.shopname }}
                </td>
                <td>
                    {{ log.shopid }}
                </td>
                <td>
                    {{ (new Date( parseInt( log.stamp ) )).toString() }}
                </td>
                <td>
                    {{ log.user_name}}
                </td>
            </tr>
        </tbody>
    </table>
</div>
</template>
<style>
.date-picker-input{
    width: 8em;
}
</style>
<script>
import axios from 'axios'
import DatePicker from 'vuejs-datepicker'
import {zh} from 'vuejs-datepicker/dist/locale'
import { ModelSelect } from 'vue-search-select'
export default { 
    name: "log",
    data(){ 
        return { 
            shops_filter_options:null,
            shops_filter: null,
            shopsid_filter_options: null,
            shopsid_filter: null,
            operatelogs : [],
            alarmlogs: [],
            start_date:new Date(),
            end_date: new Date()
        }
    },
    components:{
        DatePicker,
        ModelSelect
    },
    methods: {
        selectDate(  ){
            var params = { start: this.start_date.getTime(), end: this.end_date.getTime() };
            axios.get( '/api/v1/security/operateLogs', { params }).then( ( resp )=> {
                this.operatelogs = resp.data
            });
    
            axios.get( '/api/v1/security/alarmLogs', { params } ).then( ( resp ) => { 
                this.alarmlogs = resp.data;
            });
        }
    },
    computed: {
        start_hours: {
            set( v ){
                return this.start_date.setHours( v );
            },
            get() {
                return this.start_date.getHours();
            }
        },
        end_hours:{
            set( v ){
                return this.end_date.setHours( v );

            },
            get () { 
                return this.end_date.getHours();
            }
        },
        start_minutes:{
            set(v){
                return this.start_date.setMinutes( v );
            },
            get(){
                return this.start_date.getMinutes( );
            }
        },
        end_minutes:{
            set( v ){
                return this.end_date.setMinutes(v );
            },
            get( ){
                return this.end_date.getMinutes();
            }
        },
        //merge alarmlogs and operatelogs to logs 
        logs(){ 
            var logs = [];
            const map_name = {"chefang": "撤防", 'bufang': '布放' };
            let i = 0, j = 0;
            for( ; i < this.alarmlogs.length && j < this.operatelogs.length; ) { 
                var alarmlog = this.alarmlogs[i];
                var oplog = this.operatelogs[j];
                if( alarmlog.stamp < oplog.stamp ){
                    var shop = this.$store.state.shops[ alarmlog.shopid ];
                    logs.push( { stamp: alarmlog.stamp, operation: '报警', user_id: alarmlog.user_id, shopname: shop.name, shopid: shop.id, arm_area: alarmlog.arm_area_idx });
                    i++;
                }
                else { 
                    var shop = this.$store.state.shops[this.$store.state.protectors[oplog.mac].shopid];
                    for( let k in oplog.operation){
                        logs.push( { stamp: oplog.stamp, operation: map_name[k], user_id: oplog.user_id, shopname: shop.name,  shopid: shop.id, arm_area: oplog.operation[k] } )
                    }
                    j++;
                }
            }
            for( ; i < this.alarmlogs.length; i++ ){
               var alarmlog = this.alarmlogs[i];
               var shop = this.$store.state.shops[ alarmlog.shopid ];
               logs.push( { stamp: alarmlog.stamp, operation: '报警', user_id: alarmlog.user_id, shopname: shop.name,  shopid: shop.id , arm_area: alarmlog.arm_area_idx });
            }

            for( ; j < this.operatelogs.length; j++ ){
                var oplog = this.operatelogs[j];
                var shop = this.$store.state.shops[this.$store.state.protectors[oplog.mac].shopid];
                for( let k in oplog.operation){
                    logs.push( { stamp: oplog.stamp, operation: map_name[k], user_id: oplog.user_id, shopname: shop.name,  shopid: shop.id, arm_area: oplog.operation[k] } )
                }
            }
            console.log( "logs: ", logs );
            return logs;
        },

        logs_filter(){
            console.log( "logs_filter: ----");
            var filted = [];
            for( let i = 0; i < this.logs.length; i++ ){
                var ok = true;
                if( this.shops_filter.value && this.logs[i].shopid != this.shops_filter.value ){
                    console.log( "filted out by shopname ")
                    ok = false;
                }
                if( this.shopsid_filter.value && this.logs[i].shopid != this.shopsid_filter.value ){
                    console.log( "filted out by shopid ")
                    ok = false;
                }
                let start_stamp = this.start_date.getTime();
                let end_stamp = this.end_date.getTime();

                if( this.logs[i].stamp < start_stamp || this.logs[i].stamp > end_stamp ){
                    console.log( 'filted out ', i);
                    ok = false;
                }

                if( ok ){
                    filted.push( this.logs[i] );
                }
            }
            return filted;
        }
    },
    created() {
        this.start_date.setHours( this.start_date.getHours() - 8 );

        var params = { start: this.start_date.valueOf(), end: new Date( this.start_date).setDate( this.start_date.getDate() + 1 )  };
        axios.get( '/api/v1/security/operateLogs', { params }).then( ( resp )=> {
            this.operatelogs = resp.data
        });

        axios.get( '/api/v1/security/alarmLogs', { params } ).then( ( resp ) => { 
            this.alarmlogs = resp.data;
        });
        var shops_filter_options = [ { text: "门店名字", value: "" }];
        for( let id in  this.$store.state.shops ){
            shops_filter_options.push( { text: this.$store.state.shops[id].name, value: id } );
        }
        console.log( "shops_filter_options: ", shops_filter_options );
        this.shops_filter_options = shops_filter_options;
        this.shops_filter = { value: "", text: "门店名字" };

        var shopsid_filter_options = [{ text: "门店编号", value: "" }];
        for( let id in this.$store.state.shops ){
            shopsid_filter_options.push( { text: id, value: id });
        }
        this.shopsid_filter_options = shopsid_filter_options;
        this.shopsid_filter = { value: "", text: "门店编号" };

    }
}
</script>